<template>
    <div>
        <div class="big">
            <div class="lan"></div><span class="p">产品类型信息</span>
            <div class="line"></div>
            <span class="p" style="margin-top:10px">编辑类型</span>
            <div style="margin-top:15px">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="产品类型名称">
                        <el-input style="width:300px" v-model="form.typeName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                     <el-form-item label="产品类型图片">



                        <el-upload class="avatar-uploader" action="" v-model="form.typeImg" :http-request="uploadURL"
                            :multiple=true :before-upload="handleBeforeUpload" :limit="8" list-type="picture-card" :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                            <img width="100%" :src="form.typeImg" alt="">
                            
                        </el-upload>

                        



                    </el-form-item>
                    <el-form-item label="图片链接">
                        <el-input style="width:300px" v-model="form.typeImg" placeholder="请输入内容"></el-input>
                    </el-form-item>
                     <el-form-item label="类型描述">
  
                        <el-input type="textarea" :rows="5" v-model="form.typeDescript" placeholder="审批人" style="width:500px;"></el-input>
                    </el-form-item>

                </el-form>
            </div>
            <el-button type="primary" style="width:80px;height:45px;margin-left:20px;margin-top:20px" @click="save">保存
            </el-button>
            <el-button style="width:80px;height:45px;margin-left:20px;margin-top:20px" @click="back">返回</el-button>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
import { client, getFileNameUUID } from './alioss.js' //引入
export default {
    data() {
        return {
            form: {
                typeImg:"",
                id:''
            },
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            imageUrl: '',
            value2: '',
        }
    },
    created() {
        this.getList();
    },
    methods: {
         handleBeforeUpload(file) {
            const isJPEG = file.name.split('.')[1] === 'jpeg';
            const isJPG = file.name.split('.')[1] === 'jpg';
            const isPNG = file.name.split('.')[1] === 'png';
            const isWEBP = file.name.split('.')[1] === 'webp';
            const isGIF = file.name.split('.')[1] === 'gif';
            const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
            if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
                this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
            }
            if (!isLt500K) {
                this.$message.error('单张图片大小不能超过 4mb!');
            }
            return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
        },
        uploadURL(file) {
            //注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
            var fileName = 'img/' + 'type' + `${Date.parse(new Date())}` + '.jpg';
            //定义唯一的文件名，打印出来的uid其实就是时间戳
            client().multipartUpload(fileName, file.file, {
                progress: function (percentage, cpt) {
                    console.log('打印进度', percentage)
                }
            }).then((res) => {
                //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
                //
                this.form.typeImg = 'http://wwssbb.oss-cn-hangzhou.aliyuncs.com/' + fileName;
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        back() {
            this.$router.push({ path: '/producttype' });
        },
        getList() {
           
            axios({
                url: "/api/product/getTypeById",
                method: "post",
                params: {
                    id: Number(this.$route.query.id)
                }
            }).then(res => {
                this.form = res.data.data
            })
        },
        save() {
             this.form.id=this.$route.query.id;
            axios({
                url: "/api/product/updateProType",
                method: "post",
                params: this.form
            }).then(res => {
                this.$message({
                    message: '编辑成功',
                    type: 'success',
                    

                });
                this.$router.push({ path: '/producttype' });
            })
        }
    },
    mounted() {
        window.Event.$on('data-A', val => {
            this.A = val
        })
    }
}
</script>

<style>
html,
body {
    height: 200%;
    background-color: #56b3ff;
}

.inputDeep {
    border: 0px;
    border: none;
}

.input {
    border: 0px;
}

html {
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.big {
    border-width: 0px;
    /* position: absolute; */
    left: 0px;
    top: 0px;
    width: 88%;
    height: 1200px;
    background: inherit;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 6%;
    margin-top: 15px;
}

.lan {
    border-width: 0px;
    left: 0px;
    top: 0px;
    width: 8px;
    height: 28px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 20px;
    margin-top: 10px;
    display: inline-block;
}

.p {
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";
    font-kerning: normal;
    margin-left: 20px;
    display: inline-block;
    margin-top: 5px;
    font-size: 20px;
}

.line {
    height: 0.1px;
    width: 96%;
    margin-left: 2%;
    margin-top: 20px;
    background-color: rgb(234, 234, 234);
}
</style>